(function ($) {
    $.fn.extend({
        fade: function (opt) {
            //设置默认值
            var settings = {
                url: null,
                boxWid: 1000,
                boxHei: 500,
                times: 2000
            }
            //合并参数
            var o = $.extend(settings, opt)
            //缓存容器对象
            var $box = this
            var $oUl = $('<ul class="point-list"></ul>')
            //创建图片元素
            $.each(o.url, function (index, items) {
                $box.append('<div><img src=' + items.imgUrl + ' /></div>')
                $oUl.append('<li></li>')
            })
            $box.append($oUl)
            /*****设置样式*****/
            //容器及图片样式
            $box.css({
                width: o.boxWid,
                height: o.boxHei,
                position: 'relative'
            }).children('div').css({
                width: o.boxWid,
                height: o.boxHei,
                position: 'absolute',
                left: '0',
                top: '0',
                display: 'none'
            }).eq(0).show().end().find('a,img').css({
                display: 'block',
                width: '100%',
                height: '100%'
            })
            $oUl.css({
                position: 'absolute',
                bottom: '188px',
                right: '-544px',
                overflow: 'hidden',
                zIndex: 5,
                listStyle: 'none',
                height: '200px',
            }).children('li').css({
                float: 'inherit',
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                background: '#333333',
                opacity: 0.3,
                marginLeft: '10px',
                marginTop: '30px',
                cursor: 'pointer',
            })
            //自动轮播
            var $timer = setTimeout(move, o.times)
            var $flag = true
            var $index = 0

            $oUl.children('li').eq(0).append('<img src="/mp/index-resources/imgs/task.png">')
            $oUl.children('li').eq(0).find('img').css({
                top: '15px'
            })
            $oUl.children('li').eq(0).css({
                opacity: 1,
            })
            function move() {
                $index++
                if ($index === o.url.length) {
                    $index = 0
                }
                //图片切换
                $box.children('div').eq($index).stop().fadeIn(500, function () {
                    if ($flag) {
                        clearTimeout($timer)
                        $timer = setTimeout(move, o.times)
                    }
                }).siblings('div').stop().fadeOut(500)
                if ($index === 0) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/task.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '15px'
                    })
                    $oUl.children('li').eq($index).css({
                        opacity: 1,
                        background: 'rgba(255, 255, 255, 0)',
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">任务目标系统 OKR</h1><ul class="font-18"><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">员工实时状态<p>一目了然</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">临近截止时间<p>自动提醒</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">任务完成后由上司进行<p>多维度评分评级</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">随时随地<p>拆分任务目标</p>,并转为任务下达给下属</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">实时<p>跟踪项目进展</p>情况</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看任务系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 1) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/crm.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '55px'
                    })
                    $oUl.children('li').eq($index).css({
                        opacity: 1,
                        background: 'rgba(255, 255, 255, 0)',
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        // $('.container-third-right').append('<h1 class="font-28">客户渠道管理 CRM</h1> <ul class="font-18"><li>团队<p>业务跟进活动</p>实时查看</li><li>通话记录支持<p>自动录音上传</p></li><li>数据报表实时统计<p>全方位销售数据</p></li><li>订单可快速关联<p>用户自定义的产品</p></li><li><p>团队业绩相互PK</p>，有竞争才有进步</li></ul><section class="video-link"><a onclick="videoDialog('+$index+')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看CRM系统操作指引视频</p></a></section>')
                        $('.container-third-right').append('<h1 class="font-28">客户渠道管理 CRM</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">团队<p>业务跟进活动</p>实时查看</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">通话记录支持<p>自动录音上传</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">数据报表实时统计<p>全方位销售数据</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">订单可快速关联<p>用户自定义的产品</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18"><p>团队业绩相互PK</p>，有竞争才有进步</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看CRM系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 2) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/achievements.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '91px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">绩效考核</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">团队成员排名<p>实时</p>查看</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">工作成果自动影响<p>动态排名</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">周期性考核<p>主客观比例</p>自主分配</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">评分人按工作相关度<p>自动推荐</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>自定义</p>职业素养主观考核项</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看绩效考核操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 3) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/approval.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '128px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">审批系统</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">预置<p>请假、报销、外出</p>等5大模板</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>自定义审批流程</p>和<p>定义审批模板</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持针对不同部门开放不同审批类型</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">独有<p>下属审批</p>视角汇总所有下属相关审批</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看审批系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 4) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/attendance.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '163px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">考勤系统</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>GPS</p>与<p>WIFI</p>双重打卡确保成功率</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持针对不同人员设置不同考勤方案</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18"><p>自动导入法定假日</p>并支持公司自定义休假</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">考勤管理员可<p>一键导出</p>公司考勤信息</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看考勤系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } 
            }
            //焦点切换
            $oUl.children('li').click(function () {
                $index = $(this).index();
                if ($flag) {
                    clearTimeout($timer);
                    $timer = setTimeout(move, o.times);
                }
                $box.children('div').eq($index).stop().fadeIn(500).siblings('div').stop().fadeOut(500);
                if ($index === 0) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/task.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '15px'
                    })
                    $oUl.children('li').eq($index).css({
                        opacity: 1,
                        background: 'rgba(255, 255, 255, 0)',
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">任务目标系统 OKR</h1><ul class="font-18"><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">员工实时状态<p>一目了然</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">临近截止时间<p>自动提醒</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">任务完成后由上司进行<p>多维度评分评级</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">随时随地<p>拆分任务目标</p>,并转为任务下达给下属</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">实时<p>跟踪项目进展</p>情况</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看任务系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 1) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/crm.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '55px'
                    })
                    $oUl.children('li').eq($index).css({
                        opacity: 1,
                        background: 'rgba(255, 255, 255, 0)',
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        // $('.container-third-right').append('<h1 class="font-28">客户渠道管理 CRM</h1> <ul class="font-18"><li>团队<p>业务跟进活动</p>实时查看</li><li>通话记录支持<p>自动录音上传</p></li><li>数据报表实时统计<p>全方位销售数据</p></li><li>订单可快速关联<p>用户自定义的产品</p></li><li><p>团队业绩相互PK</p>，有竞争才有进步</li></ul><section class="video-link"><a onclick="videoDialog('+$index+')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看CRM系统操作指引视频</p></a></section>')
                        $('.container-third-right').append('<h1 class="font-28">客户渠道管理 CRM</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">团队<p>业务跟进活动</p>实时查看</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">通话记录支持<p>自动录音上传</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">数据报表实时统计<p>全方位销售数据</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">订单可快速关联<p>用户自定义的产品</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18"><p>团队业绩相互PK</p>，有竞争才有进步</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看CRM系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 2) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/achievements.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '91px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">绩效考核</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">团队成员排名<p>实时</p>查看</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">工作成果自动影响<p>动态排名</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">周期性考核<p>主客观比例</p>自主分配</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">评分人按工作相关度<p>自动推荐</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>自定义</p>职业素养主观考核项</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看绩效考核操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 3) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/approval.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '128px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">审批系统</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">预置<p>请假、报销、外出</p>等5大模板</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>自定义审批流程</p>和<p>定义审批模板</p></span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持针对不同部门开放不同审批类型</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">独有<p>下属审批</p>视角汇总所有下属相关审批</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看审批系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                } else if ($index === 4) {
                    $oUl.children('li').empty()
                    $oUl.children('li').css({
                        opacity: 0.3,
                        background: '#333333',
                    })
                    $oUl.children('li').eq($index).append('<img src="/mp/index-resources/imgs/attendance.png">')
                    $oUl.children('li').eq($index).find('img').css({
                        top: '163px'
                    })
                    $oUl.children('li').eq($index).css({
                        background: 'rgba(255, 255, 255, 0)',
                        opacity: 1,
                    })
                    $('.container-third-right').fadeOut(500, function () {
                        $('.container-third-right').empty()
                        $('.container-third-right').append('<h1 class="font-28">考勤系统</h1><ul><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持<p>GPS</p>与<p>WIFI</p>双重打卡确保成功率</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">支持针对不同人员设置不同考勤方案</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18"><p>自动导入法定假日</p>并支持公司自定义休假</span></li><li><img src="/mp/index-resources/imgs/circle.png"><span class="font-18">考勤管理员可<p>一键导出</p>公司考勤信息</span></li></ul><section class="video-link"><a onclick="videoDialog(' + $index + ')"><img src="/mp/index-resources/imgs/camera.png"><p class="font-16">观看考勤系统操作指引视频</p></a></section>')
                        $('.container-third-right').fadeIn(500)
                    })
                }
            });
            //阻止文本被选中
            $box.children('h3').each(function (index, items) {
                items.onselectstart = items.onmousedown = items.onmouseup = function () {
                    return false
                }
            })
            //返回容器对象
            return this
        }
    })
}(jQuery))